{% extends 'admin/base_site.html' %}

{% load i18n static baykeconfig %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'baykeshop/css/grid.css' %}">
<link rel="stylesheet" href="{% static 'baykeshop/css/materialdesignicons.min.css' %}">
{% endblock %}

{% block content %}
<!-- 数据统计 -->
<div class="bk-grid">
    <div class="bk-cell">
        <div class="bk-box bk-has-background-light1 bk-is-align-items-center bk-is-shadowless1">
            <div class="bk-is-flex bk-is-justify-content-space-between">
                <div>销售额</div>
                <div>
                    <span class="bk-tag bk-is-link bk-is-light">今日</span>
                </div>
            </div>
            <div>
                <div class="bk-is-size-3">{{ sales_data.today_sales|floatformat:"-2g" }}</div>
                <div>
                    <span>昨日 {{ sales_data.yesterday_sales|floatformat:"-2g" }}</span> 
                    <span>日环比 {{ sales_data.sales_ratio }}%</span>
                    
                    {% if sales_data.sales_ratio > 0 %}
                    <span class="bk-is-size-7 bk-has-text-danger">▲</span>
                    {% else %}
                    <span class="bk-is-size-7 bk-has-text-success">▼</span>
                    {% endif %}
                </div>
            </div>
            <div class="bk-has-background-primary-95 my-2" style="height: 1px;"></div>
            <div class="bk-is-flex bk-is-justify-content-space-between bk-has-text-grey">
                <div>本月销售额</div>
                <div>
                    <span>{{ sales_data.last_month_sales|floatformat:"-2g" }}元</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="bk-cell">
        <div class="bk-box bk-has-background-light1 bk-is-align-items-center bk-is-shadowless1">
            <div class="bk-is-flex bk-is-justify-content-space-between">
                <div>用户访问量</div>
                <div>
                    <span class="bk-tag bk-is-link bk-is-light">今日</span>
                </div>
            </div>
            <div>
                <div class="bk-is-size-3">{{ visit_data.today_count.count_pv }}</div>
                <div>
                    <span>昨日 {{ visit_data.yesterday_count.count_pv }}</span> 
                    <span>日环比 {{ visit_data.ratio.pv }}%</span>
                    {% if visit_data.ratio.pv > 0 %}
                    <span class="bk-is-size-7 bk-has-text-danger">▲</span>
                    {% else %}
                    <span class="bk-is-size-7 bk-has-text-success">▼</span>
                    {% endif %}
                </div>
            </div>
            <div class="bk-has-background-primary-95 my-2" style="height: 1px;"></div>
            <div class="bk-is-flex bk-is-justify-content-space-between bk-has-text-grey">
                <div>本月访问量</div>
                <div>
                    <span>{{ visit_data.last_month_count.count_pv }}PV</span>
                </div>
            </div>
        </div>
    </div>
  
    <div class="bk-cell">
        <div class="bk-box bk-has-background-light1 bk-is-align-items-center bk-is-shadowless1">
            <div class="bk-is-flex bk-is-justify-content-space-between">
                <div>订单量</div>
                <div>
                    <span class="bk-tag bk-is-link bk-is-light">今日</span>
                </div>
            </div>
            <div>
                <div class="bk-is-size-3">{{ order_data.today_count }}</div>
                <div>
                    <span>昨日 {{ order_data.yesterday_count }}</span> 
                    <span>日环比 {{ order_data.ratio }}%</span>
                    {% if order_data.ratio > 0 %}
                    <span class="bk-is-size-7 bk-has-text-danger">▲</span>
                    {% else %}
                    <span class="bk-is-size-7 bk-has-text-success">▼</span>
                    {% endif %}
                </div>
            </div>
            <div class="bk-has-background-primary-95 my-2" style="height: 1px;"></div>
            <div class="bk-is-flex bk-is-justify-content-space-between bk-has-text-grey">
                <div>本月订单量</div>
                <div>
                    <span>{{ order_data.last_month_count }}单</span>
                </div>
            </div>
        </div>
    </div>
   
    <div class="bk-cell">
        <div class="bk-box bk-has-background-light1 bk-is-align-items-center bk-is-shadowless1">
            <div class="bk-is-flex bk-is-justify-content-space-between">
                <div>新增用户</div>
                <div>
                    <span class="bk-tag bk-is-link bk-is-light">今日</span>
                </div>
            </div>
            <div>
                <div class="bk-is-size-3">{{ user_data.today_count }}</div>
                <div>
                    <span>昨日 {{ user_data.yesterday_count }}</span> 
                    <span>日环比 {{ user_data.ratio }}%</span>
                    {% if user_data.ratio > 0 %}
                    <span class="bk-is-size-7 bk-has-text-danger">▲</span>
                    {% else %}
                    <span class="bk-is-size-7 bk-has-text-success">▼</span>
                    {% endif %}
                </div>
            </div>
            <div class="bk-has-background-primary-95 my-2" style="height: 1px;"></div>
            <div class="bk-is-flex bk-is-justify-content-space-between bk-has-text-grey">
                <div>本月新增用户</div>
                <div>
                    <span>{{ user_data.last_month_count }}人</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 快捷入口 -->
<div class="bk-grid">
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:auth_user_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-primary">
                    <i class="mdi mdi-36px mdi-account-box-edit-outline"></i>
                </span>
                <span class="mt-3">用户管理</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:system_baykedictmodel_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-info">
                    <i class="mdi mdi-36px mdi-cog-outline"></i>
                </span>
                <span class="mt-3">系统设置</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:shop_baykeshopgoods_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-link">
                    <i class="mdi mdi-36px mdi-shopping-outline"></i>
                </span>
                <span class="mt-3">商品</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:shop_baykeshoporders_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-success">
                    <i class="mdi mdi-36px mdi-list-box-outline"></i>
                </span>
                <span class="mt-3">订单管理</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:article_baykearticlecontent_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-warning">
                    <i class="mdi mdi-36px mdi-book-open-outline"></i>
                </span>
                <span class="mt-3">内容管理</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:shop_baykeshopbrand_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-danger">
                    <i class="mdi mdi-36px mdi-bank-outline"></i>
                </span>
                <span class="mt-3">品牌管理</span>
            </div>
        </a>
    </div>
    <div class="bk-cell">
        <a class="bk-box py-5 bk-is-clickable" href="{% url 'admin:article_baykesidebar_changelist' %}">
            <div class="bk-is-flex bk-is-flex-direction-column bk-is-align-items-center">
                <span class="bk-icon bk-has-text-grey">
                    <i class="mdi mdi-36px mdi-page-layout-sidebar-right"></i>
                </span>
                <span class="mt-3">侧边栏</span>
            </div>
        </a>
    </div>
 </div>

<div class="bk-box pt-6">
    {{ orders_chart|safe }}
</div>

<div class="bk-box pt-6">
    <div class="bk-columns">
        <div class="bk-column bk-is-6">
            {{ users_chart|safe }}
        </div>
        <div class="bk-column bk-is-6">
            {{ user_pie_chart|safe }}
        </div>
    </div>
    
</div>
<div class="bk-has-text-centered">
    {% dict_value 'COPYRIGHT' %}
</div>
{% endblock %}